<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Image Redraw</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            background-color: #ffffff;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Center and scale for drawing
        const cx = canvas.width / 2;
        const cy = 230; // Y-center, adjusted for text below

        // Style settings to match the hand-drawn look
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3.5;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';

        // --- Draw the Bottle ---

        // Outer contour of the bottle
        ctx.beginPath();
        ctx.moveTo(cx - 25, cy - 158);
        ctx.lineTo(cx - 25, cy - 135);
        ctx.quadraticCurveTo(cx - 50, cy - 125, cx - 50, cy - 90);
        ctx.lineTo(cx - 50, cy + 80);
        ctx.quadraticCurveTo(cx - 50, cy + 100, cx, cy + 100);
        ctx.quadraticCurveTo(cx + 50, cy + 100, cx + 50, cy + 80);
        ctx.lineTo(cx + 50, cy - 90);
        ctx.quadraticCurveTo(cx + 50, cy - 125, cx + 25, cy - 135);
        ctx.lineTo(cx + 25, cy - 158);
        ctx.stroke();

        // Inner contour of the bottle
        const inset = 10;
        ctx.beginPath();
        ctx.moveTo(cx - (25 - inset), cy - 135);
        ctx.quadraticCurveTo(cx - (48 - inset), cy - 125, cx - (50 - inset), cy - 90);
        ctx.lineTo(cx - (50 - inset), cy + 75);
        ctx.quadraticCurveTo(cx - (50 - inset), cy + 85, cx, cy + 85);
        ctx.quadraticCurveTo(cx + (50 - inset), cy + 85, cx + (50 - inset), cy + 75);
        ctx.lineTo(cx + (50 - inset), cy - 90);
        ctx.quadraticCurveTo(cx + (48 - inset), cy - 125, cx + (25 - inset), cy - 135);
        ctx.stroke();

        // Top lip detail
        ctx.beginPath();
        ctx.moveTo(cx - 25, cy - 158);
        ctx.quadraticCurveTo(cx - 15, cy - 165, cx, cy - 162);
        ctx.quadraticCurveTo(cx + 15, cy - 165, cx + 25, cy - 158);
        ctx.stroke();

        // --- Draw the Liquid ---

        // Wavy surface of the liquid
        const liquidY = cy - 20;
        const liquidLeftX = cx - (50 - inset);
        const liquidRightX = cx + (50 - inset);
        ctx.beginPath();
        ctx.moveTo(liquidLeftX, liquidY + 2);
        ctx.quadraticCurveTo(cx - 20, liquidY + 7, cx, liquidY + 2);
        ctx.quadraticCurveTo(cx + 20, liquidY - 3, liquidRightX, liquidY + 2);
        ctx.stroke();

        // Particles (dots and dashes) inside the liquid
        const particles = [
            {x: -15, y: -5, type: 'dash'}, {x: 20, y: -10, type: 'dash'},
            {x: -30, y: 10, type: 'dot'}, {x: -10, y: 15, type: 'dot'},
            {x: 15, y: 5, type: 'dot'}, {x: 5, y: 25, type: 'dash'},
            {x: 30, y: 20, type: 'dot'}, {x: -20, y: 40, type: 'dot'},
            {x: 30, y: 45, type: 'dash'}, {x: -30, y: 50, type: 'dash'},
            {x: 0, y: 50, type: 'dot'}, {x: 25, y: 60, type: 'dot'},
            {x: -5, y: 65, type: 'dash'}, {x: -25, y: 70, type: 'dot'},
            {x: 10, y: 75, type: 'dot'}
        ];

        particles.forEach(p => {
            const drawX = cx + p.x;
            const drawY = cy + p.y;
            if (p.type === 'dot') {
                ctx.beginPath();
                ctx.arc(drawX, drawY, 1.8, 0, 2 * Math.PI);
                ctx.fill();
            } else { // 'dash'
                ctx.beginPath();
                ctx.moveTo(drawX - 3, drawY);
                ctx.lineTo(drawX + 3, drawY);
                ctx.stroke();
            }
        });

        // --- Draw the Text Caption ---
        ctx.font = 'bold 28px serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 2.36.', cx, cy + 145);

    </script>
</body>
</html>